<template>
  <div class="preview-wrapper">
    <div class="preview-btn">
      <div class="content">
        <div class="download-btn">
          <!-- <div><el-button type="primary" @click="handlePrint">打印</el-button></div> -->
          <div><el-button type="primary" @click="handleExport">下载</el-button></div>
        </div>
      </div>
    </div>

    <!-- 水印方式一：放到容器背景 -->
    <!-- <div class="user-info" ref="pdfWrapper" :style="{ backgroundImage: `url(${orgBackground})` }"> -->
    <div class="user-info" ref="pdfWrapper">
      <!-- 水印方式二：放到容器顶上 水印要放到页面上面 用个div 定位到页面上方，需要设置高度-->
      <!-- <div class="water-wrapper" :style="{ backgroundImage: `url(${orgBackground})` }"></div> -->

      <!-- 方式三：不计算高度，直接设置高度为100% -->
      <div class="water-wrapper" :style="{ backgroundImage: `url(${orgBackground})` }"></div>
      <!-- <com-resume></com-resume> -->
      <pdf-content></pdf-content>
    </div>
  </div>
</template>

<script>
//工具方法，导出操作
import { downloadPDF, previewWater } from '@/utils/pdf.js'
import { watermark } from '@/utils/water.js'
// import ComResume from '@/components/resume.vue'
import PdfContent from '@/components/pdf-content/index.vue'

export default {
  name: 'userinfo',
  components: {
    // ComResume,
    PdfContent
  },
  data() {
    return {
      orgBackground: '',
    }
  },
  mounted () {
    // 生成水印
    this.orgBackground = previewWater('陈亮9371', 'http://xxxxxxx.xxx.xx', document.querySelector('.user-info'))
    // watermark(document.querySelector('.user-info'))

    // 方式二：需要设置高度
    // this.$nextTick(() => {
    //   let userInfoWrapper = document.querySelector('.user-info')
    // 	console.log(userInfoWrapper, userInfoWrapper.offsetHeight)
    // 	// 获取水印的遮罩层，因为水印要放到内容区域的上方，而背景图默认是放下方
    // 	let waterWrapper = document.querySelector('.water-wrapper')
    // 	waterWrapper.style.height = `${userInfoWrapper.offsetHeight}px`
    // })
  },
  methods: {
    handleExport() {
      downloadPDF(this.$refs.pdfWrapper, this.pfdName)
    }
  }
}
</script>

<style scoped lang="scss">
div {
  // webkit 为Google Chrome Safari 等浏览器内核
  -webkit-print-color-adjust: 'exact';
  print-color-adjust: 'exact';
  color-adjust: 'exact';
}

.preview-wrapper {
  // position: relative;
  z-index: 999;
}
.user-info {
  width: 1000px;
  background: #fff;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  padding: 0 50px 100px;
  z-index: 1;
}

// 水印的样式
.water-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  // height: 2237px; // 水印这里的高度不能写死，需要获取上面内容的高度
  z-index: 999;
  height: 100%; // 方式三
}
</style>

